import React from 'react';
import PropTypes from 'prop-types';
import DataSet from '@antv/data-set';
import {Spin, Card, Row, Col} from 'antd';
import {injectIntl, formatMessage} from './intl';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import {Chart, Geom, Axis, Tooltip, Legend, Label, View} from 'bizcharts';
export class TablePanelType extends React.PureComponent {
    // eslint-disable-next-line react/sort-comp
    onClickLegend = (ev, legendItems) => {
        setTimeout(() => {
            const checked = ev.checked;
            const value = ev.item.value;
            if(value === formatMessage({
                id: 'tablePanelType.column.n3',
                defaultMessage: '存销比'
            }))
                if(checked) {
                    this.chart.get('views')[0].get('geoms')[0].show();
                } else {
                    this.chart.get('views')[0].get('geoms')[0].hide();
                }
            const newLegend = legendItems.map(d => {
                if(d.value === value)
                    return Object.assign({}, d, {
                        checked,
                    });
                return d;
            });
            this.chart.filter('type', t => {
                const legendCfg = newLegend.find(i => i.value === t);
                return legendCfg && legendCfg.checked;
            });
            
            this.chart.legend({
                items: newLegend
            });
            this.chart.repaint();
        }, 0);
    }
    chartsContent = (dvRate, scale, legendItems, arr) =>
        (<Chart forceFit data={dvRate} scale={scale}
            style={{fontSize: '12'}}
            height={400}
            padding={['10%', '6%', '18%']}
            onGetG2Instance={c => {
                this.chart = c;
            }}>
            <Legend
                custom
                allowAllCanceled
                items={legendItems}
                onClick={ev => this.onClickLegend(ev, legendItems)} />
            <Axis name="month" />
            <Axis name="value" position={'left'} />
            <Tooltip />
            <Geom
                type="interval"
                position="month*value"
                color={['type', value => {
                    if(value === formatMessage({
                        id: 'tablePanelType.column.n1',
                        defaultMessage: '库存金额'
                    }))
                        return '#4F81BD';
                    if(value === formatMessage({
                        id: 'tablePanelType.column.n2',
                        defaultMessage: '销售金额'
                    }))
                        return '#C0504D';
                }]}
                adjust={[{
                    type: 'dodge',
                    marginRatio: 1 / 10,
                }]}>
                <Label
                    content="value"
                    textStyle={{
                        textBaseline: 'top',
                        fill: '#404040',
                        fontSize: '12',
                    }}/>
            </Geom>
            <View data={arr} >
                <Axis name={formatMessage({
                    id: 'tablePanelType.column.n3',
                    defaultMessage: '存销比'
                })} position="right" />
                <Geom type="line" position={`month*${formatMessage({
                    id: 'tablePanelType.column.n3',
                    defaultMessage: '存销比'
                })}`} color="#98B954" size={3} >
                    <Label
                        content={formatMessage({
                            id: 'tablePanelType.column.n3',
                            defaultMessage: '存销比'
                        })}
                        offset={15}
                        textStyle={{
                            textAlign: 'start',
                            textBaseline: 'start',
                            fill: '#404040',
                            fontSize: '12',
                        }}/>
                </Geom>
            </View>
        </Chart>);
    render() {
        const {data, loading} = this.props;
        const arr = data.map(v => ({
            month: v.month,
            库存金额: v.stockAmount,
            销售金额: v.saleAmount,
            存销比: v.stockSaleRatio
        }));
        //柱状图与折线图
        const dsRate = new DataSet();
        dsRate.setState('type', '');
        const dvRate = dsRate.createView().source(arr);
        
        dvRate.transform({
            type: 'fold',
            fields: [formatMessage({
                id: 'tablePanelType.column.n1',
                defaultMessage: '库存金额'
            }), formatMessage({
                id: 'tablePanelType.column.n2',
                defaultMessage: '销售金额'
            })],
            key: 'type', // key字段
            value: 'value', // value字段
        })
            .transform({
                type: 'filter',
                callback: d => d.type !== dsRate.state.type
            });
        const val = {
            type: 'linear',
            formatter: val => `${val.toFixed(2)}%`,
            tickCount: 10
        };
        const scale = {
            存销比: val,
            value: {
                alias: '存\n销\n比'
            }
        };
        const legendItems = [
            {
                value: formatMessage({
                    id: 'tablePanelType.column.n1',
                    defaultMessage: '库存金额'
                }),
                marker: {
                    symbol: 'square',
                    fill: '#4F81BD',
                    radius: 5
                }
            },
            {
                value: formatMessage({
                    id: 'tablePanelType.column.n2',
                    defaultMessage: '销售金额'
                }),
                marker: {
                    symbol: 'square',
                    fill: '#C0504D',
                    radius: 5
                }
            },
            {
                value: formatMessage({
                    id: 'tablePanelType.column.n3',
                    defaultMessage: '存销比'
                }),
                marker: {
                    symbol: 'hyphen',
                    stroke: '#98B954',
                    radius: 5,
                    lineWidth: 3
                },
                checked: true
            },
        ];
        let value = 0;
        // eslint-disable-next-line no-return-assign
        data.map(y => value += y.stockSaleRatio);
        return (
            <div>
                <Spin spinning={loading}>
                    <Card>
                        <DescriptionList size="large" title={<Row><Col span={12}>
                            {length > 0 && (`${data[0].country}--${formatMessage({
                                id: 'tablePanel.column.stockSaleRatio',
                                defaultMessage: '存销比'
                            })}`)}
                        </Col></Row>}>
                            {this.chartsContent(dvRate, scale, legendItems, arr)}
                        </DescriptionList>
                    </Card>
                </Spin>
            </div>
        );
    }
}

TablePanelType.propTypes = {
    data: PropTypes.array,
    intl: PropTypes.object,
    loading: PropTypes.bool,
};

import {connect} from 'react-redux';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
const getData = selectorFactory(['page', 'domainData', 'listType', 'data']);
const mapStateToProps = state => ({
    data: getData(state),
    loading: state.getIn(['page', 'domainData', 'listType', 'isFetching'])
});
export default connect(mapStateToProps, null)(injectIntl(TablePanelType));
